<!DOCTYPE html PUBLIC>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理中心 - 添加评论</title>
    <link rel="stylesheet" href="/admin/css/pintuer.css"/>
    <link rel="stylesheet" href="/admin/css/admin.css"/>
    <link href="/admin/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
    <script src="/admin/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/admin/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/admin/js/pintuer.js"></script>
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">

    <style type="text/css">
        /* 全局样式调整 */
        body {
            background-color: #f5f7fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
        }

        .panel {
            max-width: 900px;
            margin: 30px auto;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            border-radius: 8px;
            overflow: hidden;
            border: none;
        }

        .panel-head {
            background-color: #2c3e50;
            color: #ffffff;
            padding: 18px 25px;
            font-size: 18px;
            border-bottom: none;
        }

        .panel-head strong {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .body-content {
            padding: 30px;
            background-color: #ffffff;
        }

        /* 表单样式优化 */
        .form-group {
            margin-bottom: 25px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            transition: all 0.3s ease;
        }

        .form-group:hover {
            background-color: #f9fafb;
        }

        .label {
            width: 120px;
            padding-right: 20px;
            text-align: right;
            font-weight: 500;
            color: #444;
            flex-shrink: 0;
        }

        .body-content label {
            font-size: 14px;
            color: #333;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .body-content label:after {
            content: "*";
            color: #e74c3c;
            margin-left: 4px;
        }

        .label:not(:only-child) label:after {
            content: "";
            display: none;
        }

        .field {
            flex-grow: 1;
            min-width: 280px;
        }

        .input {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: all 0.2s ease;
            box-sizing: border-box;
        }

        .input:focus {
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
            outline: none;
        }

        textarea.input {
            min-height: 120px;
            resize: vertical;
            line-height: 1.6;
        }

        /* 提示信息样式 */
        .tips {
            margin-top: 8px;
            font-size: 12px;
            line-height: 1.4;
        }

        .tips.error {
            color: #e74c3c;
            display: flex;
            align-items: center;
            gap: 5px;
            animation: shake 0.5s ease;
        }

        .tips:not(.error) {
            color: #7f8c8d;
        }

        /* 按钮样式优化 */
        .field button {
            padding: 10px 20px;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
            margin-right: 15px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .button.border-main {
            background-color: #3498db;
            color: #fff;
            border: 1px solid #3498db;
        }

        .button.border-main:hover {
            background-color: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(52, 152, 219, 0.2);
        }

        .button.border-red {
            background-color: #ecf0f1;
            color: #e74c3c;
            border: 1px solid #e74c3c;
        }

        .button.border-red:hover {
            background-color: #f8f9fa;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(231, 76, 60, 0.1);
        }

        /* 动画效果 */
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .form-group {
            animation: fadeIn 0.3s ease forwards;
            opacity: 0;
        }

        .form-group:nth-child(1) { animation-delay: 0.1s; }
        .form-group:nth-child(2) { animation-delay: 0.2s; }
        .form-group:nth-child(3) { animation-delay: 0.3s; }
        .form-group:nth-child(4) { animation-delay: 0.4s; }
        .form-group:nth-child(5) { animation-delay: 0.5s; }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .panel {
                margin: 15px;
            }

            .body-content {
                padding: 20px;
            }

            .form-group {
                flex-direction: column;
                align-items: flex-start;
            }

            .label {
                width: 100%;
                text-align: left;
                padding: 0 0 8px 0;
            }

            .field {
                width: 100%;
                min-width: auto;
            }

            .field button {
                width: 100%;
                margin-bottom: 10px;
                margin-right: 0;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
<div class="panel admin-panel">
    <div class="panel-head">
        <strong>
            <i class="fa fa-comments-o"></i> 评论信息管理
        </strong>
    </div>
    <div id="app" class="body-content">
        <form method="post" class="form-x" id="form" @submit.prevent="submit">
            <!-- 评论ID，添加时可不显示，编辑时使用 -->
            <input type="hidden" name="reviewId" v-model="review.reviewId" />

            <div class="form-group">
                <div class="label">
                    <label><i class="fa fa-user"></i> 用户ID：</label>
                </div>
                <div class="field">
                    <input type="number" class="input" name="userId" v-model="review.userId" size="50"
                           placeholder="请输入用户ID" required />
                    <div class="tips error" v-if="errors.userId">
                        <i class="fa fa-exclamation-circle"></i> {{ errors.userId }}
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label><i class="fa fa-film"></i> 电影ID：</label>
                </div>
                <div class="field">
                    <input type="number" class="input" name="filmId" v-model="review.filmId" size="50"
                           placeholder="请输入电影ID" required />
                    <div class="tips error" v-if="errors.filmId">
                        <i class="fa fa-exclamation-circle"></i> {{ errors.filmId }}
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label><i class="fa fa-reply"></i> 回复ID：</label>
                </div>
                <div class="field">
                    <input type="number" class="input" name="repliedId" v-model="review.repliedId" size="50"
                           placeholder="若为回复评论，请输入被回复的评论ID，否则填0" />
                    <div class="tips">
                        <i class="fa fa-info-circle"></i> 若为顶级评论，可填写0
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label><i class="fa fa-comment"></i> 评论内容：</label>
                </div>
                <div class="field">
                    <textarea class="input" name="content" v-model="review.content" rows="5" cols="100"
                              placeholder="请输入评论内容" required></textarea>
                    <div class="tips error" v-if="errors.content">
                        <i class="fa fa-exclamation-circle"></i> {{ errors.content }}
                    </div>
                    <div class="tips" v-else>
                        <i class="fa fa-info-circle"></i> 评论内容最多500个字符
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <button class="button border-main" type="submit">
                        <i class="fa fa-check-square-o"></i> 提交
                    </button>
                    <button class="button border-red" type="button" onclick="window.history.go(-1);">
                        <i class="fa fa-arrow-left"></i> 返回
                    </button>
                </div>
            </div>
        </form>
    </div>

    <script type="text/javascript" src="/public/js/vue.js"></script>
    <script type="text/javascript" src="/public/js/axios.js"></script>
    <script type="text/javascript" src="/public/js/axios-config.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                // 初始化评论对象，与后端数据结构对应
                review: {
                    content: "",
                    userId: 0,
                    filmId: 0,
                    reviewId: 0,
                    repliedId: 0
                },
                submitUrl: "/api/v1/review/save",
                errors: {} // 用于存储表单验证错误
            },
            methods: {
                // 表单验证
                validateForm() {
                    this.errors = {};
                    let isValid = true;

                    // 验证用户ID
                    if (!this.review.userId || this.review.userId <= 0) {
                        this.errors.userId = "用户ID必须大于0";
                        isValid = false;
                    }

                    // 验证电影ID
                    if (!this.review.filmId || this.review.filmId <= 0) {
                        this.errors.filmId = "电影ID必须大于0";
                        isValid = false;
                    }

                    // 验证评论内容
                    if (!this.review.content || this.review.content.trim() === "") {
                        this.errors.content = "评论内容不能为空";
                        isValid = false;
                    } else if (this.review.content.length > 500) {
                        this.errors.content = "评论内容不能超过500个字符";
                        isValid = false;
                    }

                    return isValid;
                },

                // 提交表单
                submit() {
                    // 先进行表单验证
                    if (!this.validateForm()) {
                        return;
                    }

                    // 提交数据到后端
                    axios.post(this.submitUrl, this.review)
                        .then(response => {
                            // 显示成功提示并添加动画效果
                            const submitBtn = document.querySelector('button[type="submit"]');
                            const originalText = submitBtn.innerHTML;

                            submitBtn.disabled = true;
                            submitBtn.innerHTML = '<i class="fa fa-check"></i> 提交成功';
                            submitBtn.style.backgroundColor = '#2ecc71';
                            submitBtn.style.borderColor = '#2ecc71';

                            setTimeout(() => {
                                window.history.go(-1); // 返回上一页
                            }, 800);
                        })
                        .catch(error => {
                            console.error('提交失败', error);
                            alert('提交失败，请重试');
                        });
                },

                // 获取评论详情（用于编辑场景）
                getReviewDetail(id) {
                    axios.get(`/api/v1/review/${id}`)
                        .then(response => {
                            if (response.data.success) {
                                this.review = response.data.data;
                            } else {
                                alert('获取评论详情失败: ' + (response.data.message || '未知错误'));
                            }
                        })
                        .catch(error => {
                            console.error('获取评论详情失败', error);
                            alert('获取评论详情失败，请重试');
                        });
                }
            },
            mounted() {
                // 从URL中获取id参数，判断是添加还是编辑
                const urlObj = new URL(window.location.href)
                const params = new URLSearchParams(urlObj.search)
                const reviewId = params.get('id')

                if (reviewId) {
                    // 如果存在id参数，说明是编辑操作，获取评论详情
                    document.title = "后台管理中心 - 编辑评论";
                    document.querySelector('.panel-head strong').innerHTML =
                        '<i class="fa fa-pencil"></i> 编辑评论信息';
                    this.getReviewDetail(reviewId);
                } else {
                    document.title = "后台管理中心 - 添加评论";
                }
            }

        })
    </script>
</div>
</body>
</html>
